<template>
  <view class="customer-page">
    <!-- 顶部导航栏 -->
    <view class="top-bar">
      <image src="../../static/icons/back.png" class="back-icon" @tap="goBack"/>
      <text class="title">我的客户</text>
      <view class="icons">
        <image src="../../static/icons/search.png" class="icon" @tap="toggleSearch"/>
      </view>
    </view>

    <!-- 下拉选择框（综合排序）-->
    <view class="dropdown-menu" v-if="showDropdown">
      <view class="dropdown-item" @tap="selectCategory('综合排序')">综合排序</view>
      <view class="dropdown-item" @tap="selectCategory('全部')">全部</view>
      <view class="dropdown-item" @tap="selectCategory('男性客户')">男性客户</view>
      <view class="dropdown-item" @tap="selectCategory('女性客户')">女性客户</view>
    </view>

    <!-- 筛选栏 -->
    <view class="filter-bar">
      <scroll-view scroll-x class="filter-scroll">
        <text
          class="filter-item"
          :class="{ active: selectedCategory === '综合排序' }"
          @tap="selectCategory('综合排序')"
        >
          综合排序
        </text>
        <image src="../../static/icons/icon-arrow-down.png"
               class="dropdown-icon"
               @tap="toggleDropdown"
        />
        <text
          class="filter-item"
          :class="{ active: selectedCategory === '全部' }"
          @tap="selectCategory('全部')"
        >
          全部
        </text>
        <text
          class="filter-item"
          :class="{ active: selectedCategory === '男性客户' }"
          @tap="selectCategory('男性客户')"
        >
          男性客户
        </text>
        <text
          class="filter-item"
          :class="{ active: selectedCategory === '女性客户' }"
          @tap="selectCategory('女性客户')"
        >
          女性客户
        </text>
        <image src="../../static/icons/filter.png"
               class="filter-icon"
               @tap="toggleFilter"
        />
      </scroll-view>
    </view>

    <!-- 搜索框 -->
    <view class="search-bar" v-if="showSearch">
      <input
        class="search-input"
        placeholder="搜一搜"
        v-model="searchQuery"
      />
      <button class="search-button" @tap="search">搜索</button>
    </view>

    <!-- 客户列表 -->
    <scroll-view scroll-y class="customer-list">
      <customer-card
        v-for="cust in filteredCustomers"
        :key="cust.customerId"
        :customer="cust"
      />
    </scroll-view>
  </view>
</template>

<script>
import CustomerCard from '@/components/CustomerCard.vue';
import { AVATAR_BASE } from '@/config.js';
import { getCustomerList } from '@/api/client';  // 你的接口


export default {
  components: { CustomerCard },
  data() {
    // 这里放后端原始 VO 的模拟数据
    const customerListRaw = [
      {
        customerId: 1,
        customerName: '郑志军',
        gender: '男',
        birthDate: '1953-03-21T00:00:00',
        age: 71,
        bedId: 1001,
        roomNumber: '606-1层-1001-1',
        bedNumber: '1',
        careLevel: '高',
        checkInDate: '2025-10-10T00:00:00',
        phoneNumber: '18594214823',
        careLevelId: 2,
        // imageUrl: 可以没有，让 transformVO 拼默认
      },
      {
        customerId: 2,
        customerName: '张永强',
        gender: '男',
        birthDate: '1941-07-12T00:00:00',
        age: 83,
        bedId: 1002,
        roomNumber: '606-1层-1001-2',
        bedNumber: '2',
        careLevel: '中',
        checkInDate: '2025-10-10T00:00:00',
        phoneNumber: '16829314825',
        careLevelId: 1,
      },
      {
        customerId: 3,
        customerName: '林珊珊',
        gender: '女',
        birthDate: '1960-11-05T00:00:00',
        age: 65,
        bedId: 1003,
        roomNumber: '606-1层-1001-3',
        bedNumber: '3',
        careLevel: '低',
        checkInDate: '2025-10-10T00:00:00',
        phoneNumber: '11241908515',
        careLevelId: 3,
      },
      {
        customerId: 4,
        customerName: '王贵',
        gender: '男',
        birthDate: '1948-02-17T00:00:00',
        age: 77,
        bedId: 1004,
        roomNumber: '606-1层-1001-4',
        bedNumber: '4',
        careLevel: '中',
        checkInDate: '2025-10-10T00:00:00',
        phoneNumber: '13912345678',
        careLevelId: 2,
      }
    ];

    return {
      // 将原始 VO 转为卡片需要的数据格式
      customerList: [],       // 给 <customer-card> 用的数据
       page: 1,
       pageSize: 10,
       total: 0,
	   selectedCategory: '综合排序',
      showDropdown: false,
      showSearch: false,
      searchQuery: ''
    };
  },
  computed: {
	
    filteredCustomers() {
        let list = this.customerList.slice();
    
        if (this.searchQuery) {
          list = list.filter(c =>
            c.customerName.includes(this.searchQuery) ||
            c.phoneNumber.includes(this.searchQuery)
          );
        }
        if (this.selectedCategory === '男性客户') {
          list = list.filter(c => c.gender === '男');
        } else if (this.selectedCategory === '女性客户') {
          list = list.filter(c => c.gender === '女');
        }
        if (this.selectedCategory === '综合排序') {
          list.sort((a, b) => new Date(b.checkInDate) - new Date(a.checkInDate));
        }
    
        // 在这里输出一下当前的 list
        console.log('filteredCustomers ->', {
          searchQuery: this.searchQuery,
          selectedCategory: this.selectedCategory,
          resultCount: list.length,
          list
        });
    
        return list;
      }
  },
  methods: {
	  
	  fetchPage(){
	  		  const params = {
	  			  name: this.searchQuery || undefined,
	  			  gender: this.filterGender || undefined,
	  			  page: this.page,
	  			  pageSize: this.pageSize
	  		    };
	  			getCustomerList(params)
	  			        .then(res => {
							// 先打印一下后端原始返回
							console.log('后端返回 res：', res);
					
							// 如果你只关心 data 部分，也可以只打印 data
							console.log('后端返回 data：', res.data);
	  			          // 假设接口返回 { code, data: { records, total } }
	  			          if (res.code === 1000 && res.data) {
	  			            this.total = res.data.total;
	  			            this.customerList = this.transformVO(res.data.records);
	  			          }
	  			        })
	  			        .catch(err => {
	  			          console.error('拉取客户列表失败', err);
	  			        });
	  },
    makeImageUrl(id) {
		if(id > 17){
			return null;
		}
		return `${AVATAR_BASE}customer${id}.jpg`;
    },
	
    transformVO(voArray) {
        // 打印转换前的数据
        console.log('transformVO - before:', voArray);
    
        const result = voArray.map(vo => ({
          customerId: vo.customerId,
          customerName: vo.customerName,
          gender: vo.gender,
          age: vo.age,
          roomNumber: vo.roomNumber,
          bedNumber: vo.bedNumber,
          checkInDate: vo.checkInDate,
          phoneNumber: vo.phoneNumber,
          imageUrl: vo.imageUrl || this.makeImageUrl(vo.customerId)
        }));
    
        // 打印转换后的结果
        console.log('transformVO - after:', result);
    
        return result;
      },
    toggleDropdown() {
      this.showDropdown = !this.showDropdown;
      this.showSearch = false;
    },
    selectCategory(cat) {
      this.selectedCategory = cat;
      this.showDropdown = false;
    },
    toggleSearch() {
      this.showSearch = !this.showSearch;
      this.showDropdown = false;
    },
    search() {
      // nothing
    },
    toggleFilter() {
      // nothing
    },
    goBack() {
      uni.navigateBack();
    }
  },
  onLoad() {
      // 页面刚加载时执行
      this.fetchPage();
    }
};
</script>

<style scoped>
.customer-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #fff;
  padding-top: 20px;
}



.top-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  height: 50px;
  background-color: #fff;
}

.back-icon,
.icon {
  width: 24px;
  height: 24px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.icons {
  display: flex;
}

.dropdown-menu {
  position: absolute;
  top: 50px;
  left: 12px;
  right: 12px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  z-index: 10;
}

.dropdown-item {
  padding: 10px;
  font-size: 16px;
  border-bottom: 1px solid #eee;
}

.dropdown-item:last-child {
  border-bottom: none;
}

.filter-bar {
  margin: 8px 0;
  background: #fff;
  padding: 8px 0;
}

.filter-scroll {
  display: flex;
  align-items: center;
}

.filter-item {
  font-size: 14px;
  color: #666;
  padding: 0 12px;
  white-space: nowrap;
}

.filter-item.active {
  color: #1e88e5;
  font-weight: bold;
}

.dropdown-icon {
  width: 16px;
  height: 16px;
}

.filter-icon {
  margin-left: 8px;
  width: 20px;
  height: 20px;
}

.search-bar {
  display: flex;
  padding: 8px 12px;
  background: #fff;
}

.search-input {
  flex: 1;
  height: 32px;
  border: 1px solid #ddd;
  border-radius: 16px;
  padding: 0 12px;
  font-size: 14px;
}

.search-button {
  margin-left: 8px;
  padding: 0 16px;
  border-radius: 16px;
  background: #1e88e5;
  color: #fff;
  font-size: 14px;
}

.customer-list {
  flex: 1;
  padding: 0 0px;
}
</style>
